<template>
	<div className="login">
		<div className="container">
			<div className="left"></div>
			<div className="right">
				<div className="right-logo"></div>
				<div className="right-title">服务治理</div>
				<div className="right-form">
					<div class="form">
						<el-form
							ref="ruleFormRef"
							style="max-width: 600px"
							:model="ruleForm"
							:rules="rules"
							label-width="auto"
							class="demo-ruleForm"
							:size="formSize"
							status-icon>
							<el-form-item
								label="账号"
								prop="name">
								<el-input v-model="ruleForm.name" />
							</el-form-item>
							<el-form-item
								label="密码"
								prop="password">
								<el-input v-model="ruleForm.password" />
							</el-form-item>
							<el-form-item label="类型" prop="type">
								<el-select v-model="ruleForm.type">
									<el-option
										label="规则中心"
										value="api" />
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button
									type="primary"
									@click="submitForm(ruleFormRef)">
									登录
								</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { login } from '@/api/common'
	import { onMounted } from 'vue'
	import { useRoute, useRouter } from 'vue-router'
	import { reactive, ref } from 'vue'
	import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
	import { getItem, setItem } from '@/utils/storage'
	import useStore from '@/store/index'
	import { setToken } from '@/utils/token'

	const state = useStore()

	import userJSON from '@/mock/user.json'

	interface RuleForm {
		name: string
		password: string
		type: string
	}

	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		name: 'shaoyuan',
		password: '123456',
		type: 'api',
	})

	const router = useRouter()
	const route = useRoute()

	const rules = reactive<FormRules<RuleForm>>({
		name: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
		password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
		type: [{ required: true, message: '类型不能为空', trigger: 'change' }],
	})

	const submitForm = async (formEl: any) => {
		if (!formEl) return
		await formEl.validate(async (valid: any, fields: any) => {
			if (valid) {
				// const data = await login(formEl)
				const data = userJSON
				state.setUser(state, data.data)
				setToken(data.data.token)
				router.push('/')
				// 获取当前路由对象
				let redirect = route.query.redirect || '/'
				if (typeof redirect !== 'string') {
					redirect = '/'
				}
				router.replace(redirect)
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	onMounted(() => {})
</script>

<style lang="scss" scoped>
	.login {
		box-sizing: border-box;
		position: relative;
		width: 100%;
		height: 100vh;
		padding-top: 64px;
		background: #fff url(../../assets/img/bg_login.jpg) center no-repeat;
		background-size: 100% 100%;

		.container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			justify-content: space-between;
			align-items: center;
			overflow: hidden;
			box-shadow: 0px 2px 12px 0px rgba(29, 112, 245, 0.31);

			.left {
				width: 50%;
				height: 100%;
				background: #1b48cb url(../../assets/img/bg_login_left.png) center no-repeat;
				background-size: 100% 100%;
			}

			.right {
				box-sizing: border-box;
				width: 50%;
				height: 100%;
				background-color: #fff;

				.right-logo {
					background: url(../../assets/img/bg_login_logo.png) center no-repeat;
					background-size: 100% 100%;
				}

				.right-title {
					text-align: center;
					font-size: 26px;
					color: #222222;
					font-weight: bold;
					line-height: 40px;
					text-align: center;
					font-weight: 400;
				}

				.right-form {
					margin: 20px auto;
					width: 400px;
				}
			}
		}
	}

	@media screen and (max-width: 1025px) {
		.container {
			width: 870px;
			height: 408px;
			border-radius: 8px;
		}

		.right-logo {
			width: 232px;
			height: 42px;
			margin: 20px auto 12px auto;
		}

		.right-title {
			margin-bottom: 24px;
		}
	}

	@media screen and (max-width: 1367px) and (min-width: 1025px) {
		.container {
			width: 1040px;
			height: 480px;
			border-radius: 8px;
		}

		.right-logo {
			width: 232px;
			height: 42px;
			margin: 48px auto 16px auto;
		}

		.right-title {
			margin-bottom: 36px;
		}
	}

	@media screen and (max-width: 99999px) and (min-width: 1367px) {
		.container {
			width: 1300px;
			height: 600px;
			border-radius: 12px;
		}

		.right-logo {
			width: 328px;
			height: 52px;
			margin: 90px auto 16px auto;
		}

		.right-title {
			margin-bottom: 50px;
		}
	}
</style>
